<template>
	<view class="tabBar" :style="[{'background-color':tabBackgroundColor}]">
		<view v-for="(item,index) in tabBarList" :key="index" class="tabBar-item"
			:style="[{'width':'calc(100% / '+tabBarList.length+')'}]" @click="tabClick(item)">
			<view class="item">
				<uni-icons :type="item.icon" size="24" :color="item.selectShow?selectColor:tabColor"></uni-icons>
				<view :style="[{'color':item.selectShow?selectColor:tabColor}]">{{ item.title }}</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "tabBar",
		data() {
			return {
				tabBarList: [{
						title: '首页',
						icon: 'home',
						selectShow: true,
						tabName: 'home'
					},
					{
						title: '更多',
						icon: 'more',
						selectShow: false,
						tabName: 'more'
					},
					{
						title: '我的',
						icon: 'person',
						selectShow: false,
						tabName: 'mine'
					}
				],
				selectColor: '',
				tabBackgroundColor: '',
				tabColor: '',
			};
		},
		mounted() {
			console.log(this.theme, 'this.theme');
			if (this.theme == 'light') { //浅色主题 
				this.selectColor = "#a5673f";
				this.tabBackgroundColor = '#fff';
				this.tabColor = '#333';
			}
			if (this.theme == 'dark') { //深色主题
				this.selectColor = "#1cbbb4";
				this.tabBackgroundColor = '#333';
				this.tabColor = '#fff';
			}
		},
		methods: {
			tabClick(res) {
				if (res.selectShow) return;
				this.tabBarList.forEach(i => {
					i.selectShow = false;
				});
				res.selectShow = true;
				this.$emit('tabSwitchover', res.tabName);
			},
		},
	}
</script>

<style lang="less" scoped>
	.tabBar {
		display: flex;
		justify-content: space-around;
		padding: 2px 0px;
		box-sizing: border-box;

		.tabBar-item {
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
	}
</style>